<template>
    <div class="form-wrapper">
        <div class="card">
            <el-tag size="mini" class="dark-tag" :color="this.dataToForm.info.color">节点</el-tag>
            <span> {{this.dataToForm.info.name}}</span>
        </div>
        <el-divider class="divider-style"><i class="el-icon-edit"></i></el-divider>
        <el-collapse class="form" accordion>
            <el-collapse-item title="新建关系">
                <el-form>
                    <el-form-item>
                        <el-select class="form-item-style" placeholder="设置关系类型" v-model="linkStyle">
                            <el-option v-for="item in optionsLink"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="form-item-style" type="primary" @click="createLink">
                            选择连接点<i class="el-icon-eleme"></i>
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="编辑节点">
                <el-form>
                    <el-form-item>
                        <el-input class="input-with-button" placeholder="编辑节点名称" v-model="nodeName">
                        </el-input>
                        <el-button class="button-in-input" @click="modifyName">
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-select class="input-with-button" placeholder="编辑节点分类" v-model="nodeCategory">
                            <el-option v-for="item in options"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                        </el-select>

                        <el-button class="button-in-input" @click="modifyCategory">
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-collapse-item>
            <el-collapse-item title="删除节点">
                <el-button class="form-item-style" type="danger" @click="deleteNode">
                    删除节点<i class="el-icon-delete"></i>
                </el-button>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
    export default {
        name: "nodeForm",
        data() {
            return {
                nodeName: "",
                nodeCategory: "",
                linkStyle: "",
                relationName: "",
                options: [
                    {
                        value: 0,
                        label: "机关"
                    },
                    {
                        value: 1,
                        label: "人物"
                    },
                    {
                        value: 2,
                        label: "材料"
                    },
                    {
                        value: 3,
                        label: "证明"
                    },
                    {
                        value: 4,
                        label: "事项"
                    }
                ],
                optionsLink: [
                    {
                        value: 0,
                        label: "办理",
                    },
                    {
                        value: 1,
                        label: "默认",
                    },
                    {
                        value: 2,
                        label: "规则标签",
                    },
                    {
                        value: 3,
                        label: "获得(状态更新)",
                    },
                    {
                        value: 4,
                        label: "提交",
                    },
                    {
                        value: 5,
                        label: "履行",
                    },
                    {
                        value: 6,
                        label: "生成",
                    },
                    {
                        value: 7,
                        label: "公证",
                    }
                ],
                linkStyles: [
                    {
                        lineStyle: {
                            "type": "dotted",
                        },
                        symbol: ["pin", "arrow"]
                    },
                    {
                        lineStyle: {
                            "type": "dotted",
                        },
                        symbol: ["none", "none"]
                    },
                    {
                        lineStyle: {
                            "type": "solid",
                        },
                        symbol: ["pin", "arrow"]
                    },
                    {
                        lineStyle: {
                            "type": "dashed",
                        },
                        symbol: ["pin", "diamond"]
                    },
                    {
                        lineStyle: {
                            "type": "solid",
                        },
                        symbol: ["pin", "arrow"]
                    },
                    {
                        lineStyle: {
                            "type": "solid",
                        },
                        symbol: ["pin", "triangle"]
                    },
                    {
                        lineStyle: {
                            "type": "solid",
                        },
                        symbol: ["pin", "Rect"]
                    },
                    {
                        lineStyle: {
                            "type": "dotted",
                        },
                        symbol: ["pin", "roundRect"]
                    },
                    {
                        lineStyle: {
                            "type": "dashed",
                        },
                        symbol: ["pin", "circle"]
                    },
                ]
            };
        },
        props: {
            dataToForm: {
                type: Object
            },
            updateMyCharts: {
                type: Function,
                default: null
            },
            closeDrawer: {
                type: Function,
                default: null
            }
        },
        methods: {
            createLink() {
                this.$root.new_link_flag = true;
                this.$root.new_link_style = this.linkStyles[this.linkStyle];

            },
            modifyName() {
                let node = this.$root.graph.nodes[this.dataToForm.info.dataIndex];
                node.name = this.nodeName;
                this.$root.graph.nodes[this.dataToForm.info.dataIndex] = node;

                this.updateMyCharts();
                this.nodeName = "";
            },
            modifyCategory() {
                let node = this.$root.graph.nodes[this.dataToForm.info.dataIndex];
                node.category = this.nodeCategory;
                this.$root.graph.nodes[this.dataToForm.info.dataIndex] = node;

                this.updateMyCharts();
                this.nodeCategory = "";
            },
            deleteNode() {
                let node = this.$root.graph.nodes[this.dataToForm.info.dataIndex];
                node.category = "Abandoned";
                this.$root.graph.nodes[this.dataToForm.info.dataIndex] = node;

                this.updateMyCharts();
                this.closeDrawer();
            },
            modifyNodeLocation() {
                this.$root.modify_nodeLocation_flag = true;
            }
        }
    };
</script>

<style scoped>
    @import "../../assets/styles/formStyle.css";
</style>